<template>
    <div class="content">
        <TableLayout form-title="">
        <div slot="form-title" class="table-title"></div>
            <el-form :model="formInline" class="formInline" label-width="70px" 
            :rules="rules" slot="form"
             ref="formInline">          
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="类别">
                            <el-select v-model="formInline.sDeviceTypeId" placeholder="请选择" style="width:100%" @change="changeDeviceType">
                                <el-option v-for="item in formInline.sDeviceTypeIdList" :key="item.pId" :label="item.sName" :value="item.pId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="设备类型">
                            <el-select v-model="formInline.fDeviceId" placeholder="请选择" style="width:100%">
                                <el-option v-for="item in formInline.fDeviceIdList" :key="item.pId" :label="item.sName" :value="item.pId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="设备定位">
                            <el-input v-model="formInline.sPosition" placeholder="请输入设备定位" :maxlength="20" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="设备ID号">
                            <el-input v-model="formInline.sNumber" placeholder="请输入设备ID号" :maxlength="20" ></el-input>
                        </el-form-item>
                    </el-col> 
                    <el-col :span="8">
                        <el-form-item label="所属学校">
                            <school v-model="formInline.schoolName" style="width:100%" @change='schoolChange'></school>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="top-line">
                    <el-col :span="4" :offset="20"> 
                        <el-button type="primary" class="top-btn" @click="onSubmit">查询</el-button>
                    </el-col>
                </el-row>
            </el-form>
            <div class="table-title" slot="table-title">
                <div class="btnPosition">
                    <el-button @click="addDevice">添加设备</el-button>
                    <el-button @click="deviceType">设备类型</el-button>
                </div>
            </div>
            <el-table :data="dataApply" style="width: 100%" border v-loading="loading" ref="multipleTable">
                
                <el-table-column prop="schoolName" align="center" label="所属学校">
                    <template scope="scope">
                        <span>{{ scope.row.schoolName || '--'}}</span>
                    </template>
                </el-table-column>
                
                <el-table-column align="center" label="类别">
                    <template scope="scope">
                        <span>{{ scope.row.sDeviceType || '--'}}</span>
                    </template>
                </el-table-column>
                
                <el-table-column prop="sDeviceName" align="center" label="设备类型"></el-table-column>

                <el-table-column prop="sPosition" align="center" label="设备定位"></el-table-column>

                <el-table-column label="设备ID号" align="center" prop="sNumber"></el-table-column>
    
                <el-table-column label="创建时间" align="center">
                    <template scope="scope">
                        <span>{{ scope.row.sCreateTime || '--' }}</span>
                    </template>
                </el-table-column>

                <el-table-column prop="sCreator" align="center" label="创建人">
                    <template scope="scope">
                        <span>{{ scope.row.sCreator || '--'}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="设备状态" align="center" prop="sFlag">
                    <template scope="scope">
                        <span v-if="scope.row.sFlag==0">启用</span>
                        <span v-if="scope.row.sFlag==1">禁用</span>
                    </template>
                </el-table-column>

                <el-table-column align="left" label="其他操作" width="300">
                    <template scope="scope">                        
                        <el-button type="text" class="btn-success" @click="checked(scope.row.pId)">查看</el-button>
                        <el-button type="text" class="btn-success" @click="forbiden(scope.row.pId,scope.row.sPosition)" v-if="scope.row.sFlag==0">禁用</el-button>
                        <el-button type="text" class="btn-success" @click="awaken(scope.row.pId,scope.row.sPosition)" v-if="scope.row.sFlag==1">启用</el-button>
                        <el-button type="text" class="btn-success" @click="deleteRow(scope.row.pId,scope.row.sPosition,scope.row.fDeviceId,scope.row.fSchoolId)" v-if="scope.row.sFlag==1">删除</el-button>
                        <el-button type="text" class="btn-success" @click="broadcastDevice(scope.row.fDeviceId,scope.row.fSchoolId,scope.row.fDeviceId)" v-if="scope.row.status==0">分班播报设置</el-button>
                    </template>
                </el-table-column>           
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listQuery.total"
                    :current-page.sync="listQuery.page"
                    :page-sizes="config.pageSizes"
                    :page-size="config.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>
    </div>
</template>

<script>
import TableLayout from 'components/TableLayout';
import {findDeviceByPage, getClassIdByName, updateFlag, getTypeNameByClassId, deleteDevice} from 'api/attendanceManage';
import { mapState, mapActions, mapGetters } from 'vuex';
import province from 'components/CascadeRegion/province';
import city from 'components/CascadeRegion/city';
import region from 'components/CascadeRegion/region';
import school from 'components/SchoolClasss/school';
import validate from '@/utils/validate';
export default{
    components: {TableLayout, province, city, region, school},
    data() {
        return {
            formInline: {// form表单数据
                sDeviceTypeId: '',
                sDeviceTypeIdList: [],
                fDeviceId: '',
                fDeviceIdList: [],
                sNumber: '',
                findCity: [],
                findArea: [],
                schoolName: '',
                schoolId: '',
                sPosition: '',
                accountStatusList: [
                    {
                        statusNum: '',
                        statusName: '全部'
                    },
                    {
                        statusNum: '0',
                        statusName: '正常'
                    },
                    {
                        statusNum: '1',
                        statusName: '已冻结'
                    }
                ],
                accountStatus: ''
            },
            dataApply: [],
            subjectDetail: false,
            subject: '',
            dataNum: 1, // 表格1显示条数，初始为1
            listQuery: {// 分页
                page: 1,
                total: 0
            },
            rules: {
                loginNum: [
                    { pattern: /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1})|(14[0-9]{1}))+\d{8})$/, message: '请输入正确的联系方式', trigger: 'blur'}
                ],
                EId: [...validate.exueCode()]
            },
            loading: true
        }
    },
    computed: {
        ...mapState({
            config: state => state.config.table,
            cacheUpdated: state => state.app.cacheUpdated// 局部刷新列表
        }),
        ...mapGetters([
            'uid'
        ])
    },
    watch: {// 局部刷新列表
        cacheUpdated(val) {
            val && this.searchFetchData();
        }
    },
    // 初始化
    created() {
        this.searchFetchData();
        this.getClassId();
    },
    methods: {
        // 全局获取行数
        ...mapActions(['ChangePageSize']),
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
  
        // 删除
        deleteRow(id, sPosition, fDeviceId, schoolId) {
            this.$confirm('确定要删除【'+sPosition+'】?', ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                deleteDevice(id, fDeviceId, schoolId).then(response => {
                    this.searchFetchData();
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    })
                });  
            }).catch(() => {
                this.$message.info('已取消');
            });
        },
        // 禁用
        forbiden(pId, sPosition) {
            this.$confirm('确定要禁用【'+sPosition+'】?', ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                updateFlag(pId).then(response => {
                    this.loading = true;
                    this.searchFetchData();   
                    this.$message({
                        type: 'success',
                        message: response.data.errorMsg
                    })  
                }); 
            }).catch(() => {
                this.$message.info('已取消');
            });
        },
        // 启用
        awaken(pId, sPosition) {
            this.$confirm('确定要启用【'+sPosition+'】?', ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                updateFlag(pId).then(response => {
                    this.loading = true;
                    this.searchFetchData();
                    this.$message({
                        type: 'success',
                        message: response.data.errorMsg
                    })
                })
            }).catch(() => {
                this.$message.info('已取消');
            });
        },
        getClassId() {
            getClassIdByName().then(res => {
                this.formInline.sDeviceTypeIdList = res.data.content;
                this.formInline.sDeviceTypeIdList.unshift({
                    pId: '',
                    sName: '请选择'
                });
            })
        },
        changeDeviceType(id) {
            if (id=='') {
                this.formInline.fDeviceId = '';
                this.formInline.fDeviceIdList = [];
                return '';
            }
            getTypeNameByClassId(id).then(res => {
                this.formInline.fDeviceIdList = res.data.content;
                this.formInline.fDeviceIdList.unshift({
                    pId: '',
                    sName: '请选择'
                });
                this.formInline.fDeviceId = '';
            })
        },
        // 分页
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.ChangePageSize(val);
            this.searchFetchData();
        },
        handleCurrentChange(val) {    
            this.listQuery.page = val;
            this.searchFetchData();
        },
        
        // 查询列表
        searchFetchData() {
            this.loading = true;
            findDeviceByPage(this.listQuery.page, this.config.pageSize, this.formInline.sDeviceTypeId, this.formInline.fDeviceId, this.formInline.schoolId, this.formInline.sNumber, this.formInline.sPosition).then(response => {              
                this.dataApply = response.data.content.list;
                this.listQuery.total = response.data.content.pagination.total;
                this.loading = false;
            });
        },

        // 获取学校id
        schoolChange(val) {
            this.formInline.schoolId = val
        },

        // 表单查询
   
        onSubmit(ruleForm) {
            this.listQuery.page = 1;
            this.searchFetchData();
        },
        broadcastDevice(uId, schoolId, fDeviceId) {
            let pId = uId + ';' + schoolId + ';' + fDeviceId;
            this.$router.push({path: `/attendance/classSetUp/${pId}`});
        },
        deviceType() {
            this.$router.push({path: '/deviceType/index'});
        },
        // 添加
        addDevice() {
            this.$router.push({path: '/attendance/addAttendance'});
        },
        // 查看
        checked(uId, pId) {
            this.$router.push({path: `/attendance/getAttendance/${uId}`});
        }
    }
}
</script>
<style lang="scss" scoped>
.content {
    position: relative;
    padding: 0px;
    $bgcolor:#fff;
    label{
        text-align:left;
    }
    .el-tag{
        margin-left:5px;
        background:#f9f9f9;
        color:#444;
    }
    .formInline {
        .formBtn{
            width: 100%;
            height: 70px;
            border-top: 1px solid #dddddd;
            position: relative;
            .btnPosition{
                position: absolute;
                right:0px; 
                top: 18px;
            }
        }
    }
    .footer{
            text-align:center;
            margin-top:40px;
        }
    .footer .el-button{
            padding:10px 40px;
        }
}
</style> 